<template>
	<view class="container">
		<view class="header" :style="headerStyle">
			<view class="address">
				<van-icon name="location" />
				<text>{{ userAddress.address }}</text>
				<van-icon class="more" name="arrow-down" />
			</view>
		</view>

		<view class="main" :style="mainStyle">
			<view class="wrapper">
				<view class="theme-map b-radius">
					<map class="map b-radius" show-location />
					<!--<view class="marks"></view>-->
					<view class="theme-map-footer b-radius">
						<view class="status" />
						<view class="mark green item">
							<text>梅四小区-北门</text>
						</view>
						<view class="appointment b-radius mark primary item" @click="onReservation">
							<text>预约练车时间</text>
						</view>
					</view>
				</view>
				<view class="message">
					<view class="icon">
						<van-icon name="comment" />
					</view>
					<view class="text">
						<text>请与明天15点到达预约练车地点。</text>
					</view>
				</view>
				<view class="menus">
					<swiper :style="swiperStyle" easing-function="linear">
						<swiper-item>
							<view class="menu">
								<view class="menu-item" v-for="(o, i) in menus" :key="i">
									<view class="icon">
										<image src="" />
									</view>
									<view class="text">{{ o.name }}</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="menu">
								<view class="menu-item" v-for="(o, i) in menus" :key="i">
									<view class="icon">
										<image src="" />
									</view>
									<view class="text">{{ o.name }}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<cls-module title="签到领礼品" class="interval">
					<view class="gift">
						<view class="gift-cont" v-for="(o, i) in 7" :key="i">
							<view class="gift-item" />
						</view>
					</view>

					<view class="notes">
						<text>18元健康金今日已获赠。</text>
						<view class="more">
							<text>查看礼品</text>
							<van-icon name="play" />
						</view>
					</view>
				</cls-module>
				<cls-module title="积分超值兑" class="interval"></cls-module>
			</view>
		</view>

		<van-popup v-model:show="isRejectReservationPopup"></van-popup>
		<van-popup
			v-model:show="isReservationPopup"
			close-on-click-overlay
			round
			position="bottom"
			@click-overlay="isReservationPopup = false">
			<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px" :value="reservationTime">
				<picker-view-column>
					<view style="line-height: 50px; text-align: center">2023年</view>
				</picker-view-column>
				<picker-view-column>
					<view style="line-height: 50px; text-align: center">10月</view>
					<view style="line-height: 50px; text-align: center">11月</view>
					<view style="line-height: 50px; text-align: center">12月</view>
				</picker-view-column>
				<picker-view-column>
					<view style="line-height: 50px; text-align: center">20日</view>
					<view style="line-height: 50px; text-align: center">21日</view>
					<view style="line-height: 50px; text-align: center">22日</view>
					<view style="line-height: 50px; text-align: center">23日</view>
					<view style="line-height: 50px; text-align: center">23日</view>
				</picker-view-column>
				<picker-view-column>
					<view style="line-height: 50px; text-align: center">上午</view>
					<view style="line-height: 50px; text-align: center">下午</view>
					<view style="line-height: 50px; text-align: center">全天</view>
				</picker-view-column>
			</picker-view>
		</van-popup>
	</view>
</template>

<script setup lang="ts">
import { merge } from "lodash";
import { useUserAddress } from "@/store/useUserAddress";
import { useHook } from "@/pages/index/hook";
import ClsModule from "@/components/clsModule/index.vue";

const { menus } = useHook();

const storeSystem = useStoreSystem();
const userAddress = useUserAddress();

const headerStyle = computed(() => merge(storeSystem.navBarHeightStyle));
const mainStyle = computed(() => ({
	paddingTop: storeSystem.getNavBarHeight + "px"
}));
const swiperStyle = computed(() => ({
	height: `360rpx`
}));

onMounted(() => {
	onQueryReservationStatus();
});

/* 预约 */
const reservationTime = ref("");
const isReservationPopup = ref(false);
const onReservation = () => {
	isReservationPopup.value = true;
};

/* 获取预约状态 */
const isRejectReservationPopup = ref(false);
const onQueryReservationStatus = () => {};
</script>

<style scoped lang="scss" src="./index.scss" />
